<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>报警类型</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link
      rel="stylesheet"
      href="../../lib/layui-v2.5.5/css/layui.css"
      media="all"
    />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
    <link rel="stylesheet" href="../../lib/dateTime/bootstrap.css" />
  </head>
  <style>
    .layui-btn {
      margin-bottom: 10px;
      margin-left: 25px;
      margin: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  <body>
    <div class="layuimini-container">
      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title" id="alarmNameType"></ul>
        <div class="layui-tab-content" id="alarmNameList"></div>
      </div>
    </div>
    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="../../lib/dateTime/jquery-1.8.3.min.js"></script>
    <!-- <script src="../../js/Hcurve.js"></script> -->
    <script>
      var p = [];

      layui.use(["table", "miniTab"], function () {
        //         // 2020-03-25 HF 保存token
        var token = sessionStorage.getItem("newtoken");
        var $ = layui.jquery,
          form = layui.form,
          miniTab = layui.miniTab,
          table = layui.table;
        miniTab.listen();

        var html_alarm = "";
        var html_alarm2 = "";

        index = layer.load(1);

        $.ajax({
          url: "/oms-web/events/types-authority?token=" + token,
          dataType: "json",
          type: "get",
          contentType: "application/json",
          success: function (data) {
            if (data.code == -1) {
              window.location = "../login-1.html";
            }
            if (data.code === 0) {
              index = layer.close(1);
              if (data.data != null && data.data != undefined) {
                // 2020-03-31 HF
                $.each(data.data, function (index, alarmName) {
                  p.push(alarmName);
                  html_alarm += "<li>" + alarmName.className + "</li>";
                  html_alarm2 += '<div class="layui-tab-item">';
                  html_alarm2 += '<div class="jh">';
                  $.each(alarmName.eventTypes, function (index, alarmNameList) {
                    html_alarm2 +=
                      '<button class="layui-btn layui-btn-primary layui-btn-radius layui-col-md2 All" value="' +
                      alarmNameList.eventNo +
                      '" onclick="changeColor(this)"> ' +
                      alarmNameList.eventName +
                      " </button>";
                  });

                  html_alarm2 +=
                    '<button id="AlramSeach" onclick=" AllColor(this)" class="layui-btn layui-btn-normal" style="border-radius: 30px;"><i class="layui-icon"></i>一键全选 / 一键取消</button>';
                  html_alarm2 += "</div>";
                  html_alarm2 += "</div>";
                });
                //  保存数据
                //  sessionStorage.setItem('SaveEvent',JSON.stringify(p));
                $("#alarmNameType").html(html_alarm);
                $("#alarmNameList").html(html_alarm2);

                //  默认显示第一个tab
                $("#alarmNameType").children(":first").addClass("layui-this");
                $("#alarmNameList").children(":first").addClass("layui-show");
              }
            }
          },
          error: function () {
            layer.msg("数据出错！");
          },
        });
      });

      //  获取整个需要改checked的数据
      var cj = p;
      // 点击颜色
      var nu = 0;

      function changeColor(hh) {
        //初始化 保存数组
        var checeArr = [];

        //判断点击增加或删除颜色
        if ($(hh).hasClass("bgColor")) {
          $(hh).removeAttr("style", "");
          $(hh).removeClass("bgColor");
          nu--;
        } else {
          $(hh).css({ background: "#1aa094", color: "#fff" });
          $(hh).addClass("bgColor");
          nu++;
        }

        // 双层for循环
        for (var key in cj) {
          var dat = cj[key].eventTypes;
          for (var lkj in dat) {
            // 判断内层checked
            if (dat[lkj].eventNo == $(hh).val()) {
              if (dat[lkj].checked == true) {
                dat[lkj].checked = false;
              } else {
                dat[lkj].checked = true;
              }
              // 遍历数组 有ture 即将外层设置为ture 或者false
              for (let i = 0; i < dat.length; i++) {
                checeArr.push(dat[i].checked);
              }

              if (checeArr.indexOf(true) > -1) {
                cj[key].checked = true;
              } else {
                cj[key].checked = false;
              }
            }
          }
        }
        var countDes = "已选择" + nu + "项";
        //  保存数据
        sessionStorage.setItem("SaveAlarm", JSON.stringify(cj));
        sessionStorage.setItem("SaveNo", JSON.stringify(countDes));
      }

      // 全选颜色
      function AllColor(obj) {
        //  保存数据
        sessionStorage.setItem("SaveAlarm", JSON.stringify(cj));
        $(obj).parents(".jh").find(".All").click();
      }

      // //注意：parent 是 JS 自带的全局对象，可用于操作父页面
      // var index58 = parent.layer.getFrameIndex(window.name); //获取窗口索引
    </script>
  </body>
</html>
